<template>
    <el-form-item v-bind="formItemRender" :prop="options.prop">
      <component
        :is="renderComponent"
        v-model="value"
        v-bind="componentProps"
      />
    </el-form-item>
  </template>
  
  <script setup>
  import { ref,watch, computed } from 'vue';
  import _ from 'lodash';
  const props = defineProps({
    options: {
      type: Object,
      default: () => ({})
    },
    data:{
        type:[String,Array,Number]
    }
  });
  
  const emit = defineEmits(['update:data']);
  const value = ref(null);
  const visible = ref(false);

  watch(value,(newVal)=>{
    if(props.data !== newVal){
      emit('update:data',newVal)
    }
  },{deep:true})
  
  watch(()=>props.data,(newVal)=>{
    if(value.value !== newVal){
      value.value = newVal
    }
  },{deep:true})

  const formItemRender = computed(() => {
    const labelWidth = props.options.labelWidth,
    label = props.options.labelText;
    let obj = {labelWidth,label}
    return _.omitBy(obj,_.isUndefined)
  });
  // 计算属性确定渲染哪个组件
  const renderComponent = computed(() => {
    switch (props.options.type) {
      case 'text':
        return 'el-input';
      case 'select':
        return 'el-select-v2';
      case 'number':
        return 'el-input-number';
      case 'checkbox':
        return 'el-checkbox-group';
      case 'radio':
        return 'el-radio-group';
      case 'datetime':
        return 'el-date-picker';
      case 'datetimeRange':
        return 'el-date-picker';
      case 'cascader':
        return 'el-cascader';
      case 'timepicker':
        return 'el-time-picker';
      case 'textarea':
        return 'el-input';
      case 'multiple':
        return 'el-select';
      case 'switch':
        return 'el-switch';
      case 'selectTree':
        return 'el-tree-select';
      default:
        return 'el-input';
    }
  });
  
  // 计算属性确定组件的属性
  const componentProps = computed(() => {
    const baseProps = {
      ...props.options
    };
    console.log(baseProps,"baseProps")
    if (props.options.type === 'datetime' || props.options.type === 'datetimeRange') {
      baseProps.type = props.options.type === 'datetimeRange' ? 'datetimerange' : 'datetime';
    }
  
    if (props.options.type === 'select' || props.options.type === 'multiple') {
      baseProps.filterable = true;
      baseProps.clearable = true;
      baseProps.options = props.options.options || [];
    }
  
    if (props.options.type === 'checkbox') {
      baseProps.options = props.options.options;
    }
  
    if (props.options.type === 'radio') {
      baseProps.size = 'large';
      baseProps.options = props.options.options;
    }
  
    if (props.options.type === 'cascader') {
      baseProps.options = props.options.options;
      baseProps.props = {
        expandTrigger: 'hover',
        value: 'value',
        label: 'label',
        children: 'children'
      };
    }
  
    if (props.options.type === 'textarea') {
      baseProps.type = 'textarea';
      baseProps.autosize = { minRows: 6, maxRows: 24 };
    }
  
    if (props.options.type === 'selectTree') {
      baseProps.data = props.options.options;
      baseProps.props = {
        value: 'funcId',
        label: 'title',
        children: 'children'
      };
      baseProps.checkStrictly = true;
    }
  
    if (props.options.type === 'selectDialog') {
      baseProps.visible = visible;
      baseProps.title = props.options.dialog ? props.options.dialog.title || '请选择' : '请选择';
      baseProps.config = props.options.dialog;
    }
  
    return baseProps;
  });
  
  const handleDialogSelect = (data) => {
    console.log(props.options, data);
    value.value = data; // 更新表单控件的值
  };
  </script>
  
  <style scoped>
  /* 可以在这里添加样式 */
  </style>